<template>
	<view class="content">
		
		<view class="block1"></view>
		<view class="page index">
			    <view class="list-box">
					  <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
					     {{item.selected?item.title:item.title}}
					 </view>
			     </view>
		</view>
		<view class="news-con">
			<view class="detail-text" v-html="newsEn.content"></view>
		</view>
		
	</view>
</template>




<script>
	export default {
		data() {
			return {
				newsEn: {
					id: '',
					protocolCode: '',
					type: '',
					title: '',
					content: '',
				},
				list: [    {
				               selected: false,
								title: '隐私政策'
							},
							{
								selected: true,
								title: '服务协议'
							}],
						 
						selectId: [],
			};
		},
		onLoad() {
			this.loadAgreement()
		},
		methods:{
		//选择按钮
			choice(index) {
				this.list[index].selected = true;
				if(index == 0){
					this.list[1].selected = false;
					this.loadPrivateAgreement();
				}else{
					this.list[0].selected = false;
					this.loadAgreement();
				}
				
			},
			//加载服务协议
			loadAgreement(){
				this.selected = true;
				uni.showLoading({
					title: '处理中..',
					mask: true,
				})
				let _params = {
					code:'agreement_code',
				}
				let that = this
				that.$http.get("/protocol/queryByCode", {params:_params}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						that.newsEn = res.data.result
					}else{
						uni.hideLoading()
						that.$tip.cyToast('加载失败');
					}
				}).catch(err => {
					uni.hideLoading()
				});
			},
			//隐私政策
			loadPrivateAgreement(){
				uni.showLoading({
					title: '处理中..',
					mask: true,
				})
				let _params = {
					code:'private_code',
				}
				let that = this
				that.$http.get("/protocol/queryByCode", {params:_params}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						that.newsEn = res.data.result
					}else{
						uni.hideLoading()
						that.$tip.cyToast('加载失败');
					}
				}).catch(err => {
					uni.hideLoading()
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	height: auto;
	overflow: hidden;
	background-color: #ffffff;
	.block1{
		width: 100%;
		height: 110px;
		background: url('https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/service-agreement-top-deco-1.jpg') 0 0 no-repeat;
		background-size: 100% auto;
		border: 0px solid #f00;
	}
	/* 新闻公告 */
	.news-con{
		.detail-text{
			padding: 0 20upx 20upx 20upx;
			text-align: justify;
			font-size: $uni-font-size-paragraph;
			line-height: 30px;
		}
		.rich-con{
			font-size: $uni-font-size-paragraph;
		}
	}
}

    .list-box {
        display: flex;
        flex-wrap: wrap;
        padding: 16upx;
        border-radius: 10upx;
		justify-content: space-around;
		
        view {
            width: 30%;
            height: 60upx;
            line-height: 60upx;
            text-align: center;
            margin-top: 30upx;

            &:not(:nth-child(3n)) {
                margin-right: calc(10% / 2);
            }
        }
    }

    /* 已选择 */
    .selde {
        border: 1px solid red;
        background: red;
        color: #FFFFFF;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }

    /* 未选择 */
    .noselde {
        border: 1px solid #959595;
        background: #FFFFFF;
        color: #959595;
        border-radius: 20upx;
        font-size: 20upx;
        padding: 0 10upx;
    }
</style>
